<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane v-for="item in groupList" :value="item.value" :label="item.title" />
    </el-tabs>
    <el-row :gutter="20">
      <el-col :span="6" v-for="(item, index) in configList" :key="index" style="margin-bottom: 10px">
        <el-card shadow="hover">
          <h3>{{ item.title }}</h3>
          <div class="bottom clearfix">
            <el-button type="primary" plain size="mini" @click="handleUpdate(item)" >立即设置</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 添加或修改配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <div v-if="itemType == 'dramas'">
          <el-form-item label="站点名称" prop="name">
            <el-radio v-for="item in langList" v-model="selectName" :label="item.lang" :key="item.id" @change="changeName" >{{ item.langCn }}</el-radio>
            <el-input v-if="form.name" v-model="form.name[selectName]" placeholder="请输入站点名称" />
          </el-form-item>
          <el-form-item label="前端地址" prop="h5">
            <el-input v-model="form.h5" ref="inputRef" readonly placeholder="请输入前端地址" >
              <el-button slot="append" @click="copyLink('dramas')">复制</el-button>
            </el-input>
            <span>当前站点手机端(H5)域名：</span><a v-if="dynamicLink" :href="dynamicLink">立即跳转</a>
          </el-form-item>
          <el-form-item label="默认语言" prop="lang_id">
            <el-select v-model="defaultLang" placeholder="请选择" @change="changeDefault">
              <el-option
                v-for="item in langList"
                :key="item.id"
                :label="item.langCn"
                :value="item.id"
              >{{ item.langCn }}</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="logo" prop="company">
            <image-upload v-model="form.company"/>
          </el-form-item>
          <el-form-item label="版权" prop="list">
            <div v-for="item in copyrightList">
              <image-upload v-model="item.image"/>
              <el-input v-model="item.name" />
              <el-input v-model="item.url" />
            </div>
            <el-button icon="el-icon-plus" @click="addCopyright">添加版权</el-button>
          </el-form-item>
          <el-form-item label="手机号登录" prop="mobile_switch">
            <el-radio v-model="form.mobile_switch" label="0" >关</el-radio>
            <el-radio v-model="form.mobile_switch" label="1" >开</el-radio>
          </el-form-item>
          <el-form-item label="协议配置">
            <el-radio v-for="item in langList" v-model="selectProtocol" :label="item.lang" :key="item.id" >{{ item.langCn }}</el-radio>
          </el-form-item>
          <el-form-item label="用户协议" prop="user_protocol_title">
            <el-input v-if="form.user_protocol_title" v-model="form.user_protocol_title[selectProtocol]" placeholder="请选择用户协议" >
              <el-button slot="append" @click="handleProtocol('user_protocol')">选择</el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="隐私协议" prop="privacy_protocol_title">
            <el-input v-if="form.privacy_protocol_title" v-model="form.privacy_protocol_title[selectProtocol]" placeholder="请选择隐私协议" >
              <el-button slot="append" @click="handleProtocol('privacy_protocol')">选择</el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="关于我们" prop="about_us_title">
            <el-input v-if="form.about_us_title" v-model="form.about_us_title[selectProtocol]" placeholder="请选择关于我们" >
              <el-button slot="append" @click="handleProtocol('about_us')">选择</el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="联系我们" prop="contact_us_title">
            <el-input v-if="form.contact_us_title" v-model="form.contact_us_title[selectProtocol]" placeholder="请选择联系我们" >
              <el-button slot="append" @click="handleProtocol('contact_us')">选择</el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="法律声明" prop="legal_notice_title">
            <el-input v-if="form.legal_notice_title" v-model="form.legal_notice_title[selectProtocol]" placeholder="请选择法律声明" >
              <el-button slot="append" @click="handleProtocol('legal_notice')">选择</el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="积分充值协议" prop="usable_desc_title">
            <el-input v-if="form.usable_desc_title" v-model="form.usable_desc_title[selectProtocol]" placeholder="请选择积分充值协议" >
              <el-button slot="append" @click="handleProtocol('usable_desc')">选择</el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="VIP套餐协议" prop="vip_desc_title">
            <el-input v-if="form.vip_desc_title" v-model="form.vip_desc_title[selectProtocol]" placeholder="请选择VIP套餐协议" >
              <el-button slot="append" @click="handleProtocol('vip_desc')">选择</el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="分销商套餐协议" prop="reseller_desc_title">
            <el-input v-if="form.reseller_desc_title" v-model="form.reseller_desc_title[selectProtocol]" placeholder="请选择分销商套餐协议" >
              <el-button slot="append" @click="handleProtocol('reseller_desc')">选择</el-button>
            </el-input>
          </el-form-item>
        </div>
        <div v-if="itemType == 'user'">
          <el-form-item label="默认昵称" prop="nickname">
            <el-input v-model="form.nickname" />
          </el-form-item>
          <el-form-item label="默认头像" prop="avatar">
            <image-upload v-model="form.avatar"/>
          </el-form-item>
        </div>
        <div v-if="itemType == 'sms'">
          <el-form-item label="短信类型" prop="type">
            <el-radio v-model="form.type" @change="changeSms" label="alisms" >阿里云短信</el-radio>
            <el-radio v-model="form.type" @change="changeSms" label="qcloudsms" >腾讯云短信</el-radio>
            <el-radio v-model="form.type" @change="changeSms" label="baosms" >短信宝短信</el-radio>
            <br/>
            <span>注册申请地址：</span><a :href="smsLink"></a>
          </el-form-item>
          <div v-if="form.type == 'alisms'">
            <el-form-item label="应用key" prop="key">
              <el-input v-model="form.alisms.key" />
            </el-form-item>
            <el-form-item label="密钥secret" prop="secret">
              <el-input v-model="form.alisms.secret" />
            </el-form-item>
            <el-form-item label="密钥secret" prop="sign_cn">
              <el-input v-model="form.alisms.sign_cn" />
            </el-form-item>
            <el-form-item label="密钥secret" prop="sign_en">
              <el-input v-model="form.alisms.sign_en" />
            </el-form-item>
            <el-form-item label="短信模板" prop="template">
              <div v-for="item in form.alisms.template">
                <div>
                  <span>语言标识：</span><el-input v-model="item.key" style="width: 10%" />
                  <span style="margin-left: 10px">模板ID：</span><el-input v-model="item.value" style="width: 50%" />
                </div>
              </div>
            </el-form-item>
          </div>
          <div v-if="form.type == 'qcloudsms'">
            <el-form-item label="应用AppID" prop="appid">
              <el-input v-model="form.qcloudsms.appid" />
            </el-form-item>
            <el-form-item label="应用key" prop="appkey">
              <el-input v-model="form.qcloudsms.appkey" />
            </el-form-item>
            <el-form-item label="中文签名" prop="sign_cn">
              <el-input v-model="form.qcloudsms.sign_cn" />
            </el-form-item>
            <el-form-item label="国际签名" prop="sign_en">
              <el-input v-model="form.qcloudsms.sign_en" />
            </el-form-item>
            <el-form-item label="是否使用模板" prop="isTemplateSender">
              <el-switch v-model="form.qcloudsms.isTemplateSender" active-value="1" inactive-value="0" :disabled="true"></el-switch>
            </el-form-item>
            <el-form-item label="短信模板" prop="template">
              <div v-for="item in form.qcloudsms.template">
                <div>
                  <span>语言标识：</span><el-input v-model="item.key" style="width: 10%" />
                  <span style="margin-left: 10px">模板ID：</span><el-input v-model="item.value" style="width: 50%" />
                </div>
              </div>
            </el-form-item>
          </div>
          <div v-if="form.type == 'baosms'">
            <el-form-item label="账号" prop="username">
              <el-input v-model="form.baosms.username" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="form.baosms.password" />
            </el-form-item>
            <el-form-item label="中文签名" prop="sign_cn">
              <el-input v-model="form.baosms.sign_cn" />
            </el-form-item>
            <el-form-item label="国际签名" prop="sign_en">
              <el-input v-model="form.baosms.sign_en" />
            </el-form-item>
            <el-form-item label="短信模板" prop="template">
              <div v-for="item in form.baosms.template">
                <div>
                  <span>语言标识：</span><el-input v-model="item.key" style="width: 10%" />
                  <span style="margin-left: 10px">模板：</span><el-input v-model="item.value" style="width: 50%" />
                </div>
              </div>
            </el-form-item>
          </div>
        </div>
        <div v-if="itemType == 'email'">
          <el-form-item label="发送方式" prop="mail_type">
            <el-select v-model="form.mail_type" placeholder="请选择">
              <el-option label="SMTP" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="SMTP服务器" prop="mail_smtp_host">
            <el-input v-model="form.mail_smtp_host" readonly />
          </el-form-item>
          <el-form-item label="SMTP验证方式" prop="mail_verify_type">
            <el-select v-model="form.mail_verify_type" placeholder="请选择">
              <el-option
                v-for="item in smtpOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                @change="changeSmtpPort"
              ></el-option>
            </el-select>
            <span style="margin-left: 10px;color: #5a5e66">不加密默认25,SSL默认465,TLS默认587</span>
          </el-form-item>
          <el-form-item label="SMTP端口" prop="mail_smtp_port">
            <el-input v-model="form.mail_smtp_port" />
            <span style="color: #5a5e66;">通过QQ邮箱发送邮件，建议使用587端口，并配合TLS验证方式。这样可以确保邮件传输过程中的安全性，并且避免因端口限制而无法成功连接到QQ邮箱服务器。</span>
          </el-form-item>
          <el-form-item label="SMTP用户名" prop="mail_smtp_user">
            <el-input v-model="form.mail_smtp_user" />
          </el-form-item>
          <el-form-item label="SMTP密码" prop="mail_smtp_pass">
            <el-input v-model="form.mail_smtp_pass" />
          </el-form-item>
          <el-form-item label="发件人邮箱" prop="mail_from">
            <el-input v-model="form.mail_from" />
          </el-form-item>
          <el-form-item label="邮件模板" prop="mail_template">
            <div v-for="(item, index) in form.mail_template">
              <div>
                <span>语言标识：</span><el-input v-model="item.key" style="width: 10%" />
                <span style="margin-left: 10px">模板：</span>
                <el-input v-model="item.title" style="width: 50%" >
                  <el-button slot="append" @click="handleEmailProtocol(index)">选择</el-button>
                </el-input>
              </div>
            </div>
          </el-form-item>
        </div>
        <div v-if="itemType == 'share'">
          <el-form-item label="分享海报背景" prop="user_poster_bg">
            <image-upload v-model="form.user_poster_bg"/>
          </el-form-item>
        </div>
        <div v-if="itemType == 'withdraw'">
          <el-form-item label="提现方式" prop="methods">
            <el-checkbox-group v-model="form.methods">
              <el-checkbox v-for="item in checkboxOptions" :key="item.value" :label="item.value">
                {{ item.label }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="提现手续费" prop="service_fee">
            <el-input v-model="serviceFee" >
              <template slot="append"> % </template>
            </el-input>
          </el-form-item>
          <el-form-item label="最小提现金额" prop="min">
            <el-input v-model="form.min" />
          </el-form-item>
          <el-form-item label="最大提现金额" prop="max">
            <el-input v-model="form.max" />
          </el-form-item>
          <el-form-item label="每日最大提现积分" prop="perday_amount">
            <el-input v-model="form.perday_amount" />
            <span style="color: #a1a1a1">0为不限</span>
          </el-form-item>
          <el-form-item label="每日最大提现次数" prop="perday_num">
            <el-input v-model="form.perday_num" />
            <span style="color: #a1a1a1">0为不限</span>
          </el-form-item>
        </div>
        <div v-if="itemType == 'uploads'">

        </div>
        <div v-if="itemType == 'facebook'">
          <el-form-item label="AppID" prop="app_id">
            <el-input v-model="form.app_id" />
          </el-form-item>
          <el-form-item label="密钥secret" prop="app_secret">
            <el-input v-model="form.app_secret" />
          </el-form-item>
          <el-form-item label="回调地址" prop="redirect">
            <el-input v-model="form.redirect" ref="facebookRedirect" readonly >
              <el-button slot="append" @click="copyLink('facebook')">复制</el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="H5链接" prop="return_url">
            <el-input v-model="form.return_url" />
          </el-form-item>
        </div>
        <div v-if="itemType == 'google'">
          <el-form-item label="AppID" prop="app_id">
            <el-input v-model="form.app_id" />
          </el-form-item>
          <el-form-item label="密钥secret" prop="app_secret">
            <el-input v-model="form.app_secret" />
          </el-form-item>
          <el-form-item label="回调地址" prop="redirect">
            <el-input v-model="form.redirect" ref="googleRedirect" readonly >
              <el-button slot="append" @click="copyLink('google')">复制</el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="H5链接" prop="return_url">
            <el-input v-model="form.return_url" />
          </el-form-item>
        </div>
        <div v-if="itemType == 'paypal'">
          <el-form-item label="AppID" prop="clent_id">
            <el-input v-model="form.clent_id" />
          </el-form-item>
          <el-form-item label="密钥secret" prop="client_secret">
            <el-input v-model="form.client_secret" />
          </el-form-item>
          <el-form-item label="前端地址" prop="webhook">
            <el-input v-model="form.webhook" ref="paypalRedirect" />
          </el-form-item>
        </div>
        <div v-if="itemType == 'stripe'">
          <el-form-item label="AppID" prop="app_id">
            <el-input v-model="form.app_id" />
          </el-form-item>
          <el-form-item label="密钥secret" prop="app_secret">
            <el-input v-model="form.app_secret" />
          </el-form-item>
          <el-form-item label="回调地址" prop="redirect">
            <el-input v-model="form.redirect" ref="stripeRedirect" readonly >
              <el-button slot="append" @click="copyLink('stripe')">复制</el-button>
            </el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="richtextTitle" :visible.sync="richtextOpen" width="800px" append-to-body>
      <el-table v-loading="loading" :data="richtextList" border fit highlight-current-row @current-change="handleSelectionChange">
        <el-table-column label="ID" align="center" prop="id" />
        <el-table-column label="标题" align="center" prop="title" />
        <el-table-column label="创建时间" align="center" prop="createtime" >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createtime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="更新时间" align="center" prop="updatetime" >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.updatetime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
import { listConfig, getConfig, updateConfig } from "@/api/video/systemConfig";
import {getListLang} from "@/api/video/lang";
import {listRichtext} from "@/api/systemConfig/richtext";

export default {
  name: "systemConfig",
  data() {
    return {
      // 标签页
      activeName: '0',
      // 遮罩层
      loading: true,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 配置列表
      configList: [],
      // 总条数
      total: 0,
      // 语言包表格数据
      groupList: [
        {
          title: '基础配置',
          value: 'basic'
        }, {
          title: '平台配置',
          value: 'platform'
        }, {
          title: '支付配置',
          value: 'payment'
        }
      ],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 1000,
        name: null,
        group: null,
        title: null,
        tip: null,
        type: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        // lang: [
        //   { required: true, message: "语言标识不能为空", trigger: "blur" }
        // ]
      },
      disabled: false,
      itemId: null,
      itemType: '',
      selectName: 'zh',
      langList: [],
      defaultLang: '',
      dynamicLink: '',
      selectProtocol: 'zh',
      richtextParams: {
        pageNum: 1,
        pageSize: 10,
        langId: null,
      },
      richtextTitle: '',
      richtextOpen: false,
      richtextList: [],
      protocolTitle: '',
      copyrightList: [],
      copyrightInfo: {
        image: "",
        name: "",
        url: ""
      },
      smsLink: '',
      smtpOptions: [
        {
          value: '0',
          label: '默认'
        },
        {
          value: '1',
          label: 'TLS'
        },
        {
          value: '2',
          label: 'SSL'
        }
      ],
      emailIndex: null,
      checkboxOptions: [
        {
          value: 'wechat',
          label: '微信'
        },
        {
          value: 'alipay',
          label: '支付宝'
        },
        {
          value: 'bank',
          label: '银行卡'
        }
      ],
      serviceFee: '',
    };
  },
  created() {
    this.handleClick();
  },
  mounted() {
    this.getLangList();
  },
  methods: {
    /** 查询语言包列表 */
    getLangList() {
      getListLang().then(response => {
        this.langList = response.rows;
      });
    },
    /** 切换页签触发事件 */
    handleClick() {
      this.queryParams.group = this.groupList[this.activeName].value;
      this.getList();
    },
    /** 查询语言包列表 */
    getList() {
      this.loading = true;
      listConfig(this.queryParams).then(response => {
        this.configList = response.rows;
        // 使用find方法找到符合条件的对象
        let uploads = this.configList.find(obj => obj.name == 'uploads');
        let usersign = this.configList.find(obj => obj.name == 'usersign');

        // 如果找到了符合条件的对象，则删除它
        if (uploads) {
          this.configList = this.configList.filter(obj => obj != uploads);
        }
        if (usersign) {
          this.configList = this.configList.filter(obj => obj != usersign);
        }
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 修改按钮操作 */
    handleUpdate(item) {
      getConfig(item.id).then(response => {
        this.itemId = response.data.id;
        this.itemType = response.data.name;
        this.form = JSON.parse(response.data.value);
        if (this.itemType == 'dramas') {
          this.defaultLang = this.form.lang_id;
          this.dynamicLink = this.form.h5;
          this.copyrightList = this.form.copyright.list;
        } else if (this.itemType == 'sms') {
          this.changeSms();
        } else if (this.itemType == 'withdraw') {
          this.serviceFee = this.form.service_fee * 100;
        }
        this.open = true;
        this.title = "修改配置";
      });
    },
    /** 提交按钮 */
    submitForm() {
      if (this.itemId != null) {
        if (this.itemType == 'withdraw') {
          this.form.service_fee = this.serviceFee / 100;
        }
        let params = {
          id: this.itemId,
          value: JSON.stringify(this.form)
        }
        updateConfig(params).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.open = false;
          this.getList();
        });
      }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {};
      this.resetForm("form");
    },
    changeName(val) {
      this.selectName = val;
    },
    changeDefault(val) {
      this.defaultLang = val+'';
      this.form.lang_id = val+'';
    },
    copyLink(link) {
      // 获取输入框的值
      let inputElement = null;
      if (link == 'dramas') {
        inputElement = this.$refs.inputRef.$refs.input
      } else if (link == 'facebook') {
        inputElement = this.$refs.facebookRedirect.$refs.input
      } else if (link == 'google') {
        inputElement = this.$refs.googleRedirect.$refs.input
      } else if (link == 'paypal') {
        inputElement = this.$refs.paypalRedirect.$refs.input
      } else if (link == 'stripe') {
        inputElement = this.$refs.stripeRedirect.$refs.input
      }
      if (inputElement) {
        // 选择输入框的文本
        inputElement.select();
        // 执行复制操作
        document.execCommand('copy');
        // 取消选中
        inputElement.setSelectionRange(0, 0);
        // 提示复制成功
        this.$message({
          message: '复制成功',
          type: 'success'
        });
      } else {
        this.$message({
          message: '复制失败',
          type: 'error'
        });
      }
    },
    addCopyright() {
      this.copyrightList.push(this.copyrightInfo)
    },
    handleProtocol(protocol) {
      this.protocolTitle = protocol;
      let foundObject = this.langList.find(obj => obj.lang == this.selectProtocol);
      this.richtextParams.langId = foundObject.id
      this.queryRichtext();
    },
    queryRichtext() {
      listRichtext(this.richtextParams).then(response => {
        this.richtextList = response.rows;
        this.total = response.total;
        this.richtextTitle = '协议';
        this.richtextOpen = true;
      });
    },
    handleSelectionChange(row) {
      if ('user_protocol' == this.this.protocolTitle) {
        this.form.user_protocol[this.selectProtocol] = row.id;
        this.form.user_protocol_title[this.selectProtocol] = row.title;
      } else if ('privacy_protocol' == this.this.protocolTitle) {
        this.form.privacy_protocol[this.selectProtocol] = row.id;
        this.form.privacy_protocol_title[this.selectProtocol] = row.title;
      } else if ('about_us' == this.this.protocolTitle) {
        this.form.about_us[this.selectProtocol] = row.id;
        this.form.about_us_title[this.selectProtocol] = row.title;
      } else if ('contact_us' == this.this.protocolTitle) {
        this.form.contact_us[this.selectProtocol] = row.id;
        this.form.contact_us_title[this.selectProtocol] = row.title;
      } else if ('legal_notice' == this.this.protocolTitle) {
        this.form.legal_notice[this.selectProtocol] = row.id;
        this.form.legal_notice_title[this.selectProtocol] = row.title;
      } else if ('usable_desc' == this.this.protocolTitle) {
        this.form.usable_desc[this.selectProtocol] = row.id;
        this.form.usable_desc_title[this.selectProtocol] = row.title;
      } else if ('vip_desc' == this.this.protocolTitle) {
        this.form.vip_desc[this.selectProtocol] = row.id;
        this.form.vip_desc_title[this.selectProtocol] = row.title;
      } else if ('reseller_desc' == this.this.protocolTitle) {
        this.form.reseller_desc[this.selectProtocol] = row.id;
        this.form.reseller_desc_title[this.selectProtocol] = row.title;
      } else {
        if (this.itemType == 'email') {
          this.form.email_protocol[this.emailIndex].value = row.id;
          this.form.email_protocol[this.emailIndex].title = row.title;
        }
      }
    },
    changeSms() {
      if (this.form.type == 'alisms') {
        this.smsLink = 'https://www.aliyun.com/';
      } else if (this.form.type == 'qcloudsms') {
        this.smsLink = 'https://cloud.tencent.com/act/pro/csms';
      } else if (this.form.type == 'baosms') {
        this.smsLink = 'https://console.smsbao.com/';
      }
    },
    changeSmtpPort() {
      console.log(this.form.mail_verify_type)
      if (this.form.mail_verify_type == '0') {
        this.form.mail_smtp_port = '25';
      } else if (this.form.mail_verify_type == '1') {
        this.form.mail_smtp_port = '465';
      } else if (this.form.mail_verify_type == '2') {
        this.form.mail_smtp_port = '587';
      }
    },
    handleEmailProtocol(index) {
      this.emailIndex = index;
      this.richtextParams.langId = this.form.mail_template[index].value;
      this.queryRichtext();
    }
  }
}
</script>

<style scoped>

</style>
